<!-- @format -->

<template>
  <div class="mathjax-container">
    <h1>MathJax 数学公式渲染</h1>
    <div class="formula-example">
      <h2>重要极限公式示例</h2>
      <MathJaxRenderer>
        <h3>分析</h3>
        <ul>
          <li><strong>公式含义</strong>：这是一个重要极限公式。它表明当自变量 \(x\) 趋近于 \(0\) 时，正弦函数 \(\sin x\) 与自变量 \(x\) 的比值的极限值为 \(1\) 。</li>
          <li><strong>证明思路</strong>：可以利用单位圆中的三角函数线来证明。在单位圆中，通过比较三角形和扇形的面积关系，得到关于 \(\sin x\) 、 \(x\) 、 \(\tan x\) 的不等式关系，再利用夹逼准则证明该极限。</li>
          <li><strong>应用场景</strong>：
            <ul>
              <li><strong>求极限</strong>：在求一些复杂的函数极限时，常常会将其变形，使其能够运用这个重要极限来求解。例如求 \(\lim_{x \to 0}\frac{\sin 3x}{x}\) ，可变形为 \(\lim_{x \to 0}\frac{\sin 3x}{3x}\times3\) ，再利用该公式得到结果为 \(3\) 。</li>
              <li><strong>等价无穷小替换</strong>：当 \(x \to 0\) 时， \(\sin x\) 与 \(x\) 是等价无穷小，在求极限过程中，某些情况下可以将 \(\sin x\) 替换为 \(x\) 来简化计算，但要注意替换的条件，通常在乘除运算中使用等价无穷小替换较为安全。</li>
            </ul>
          </li>
        </ul>
      
        <div class="formula-display">
          <h3>公式展示</h3>
          <div class="formula">
            $$\lim_{x \to 0}\frac{\sin x}{x} = 1$$
          </div>
        </div>
      </MathJaxRenderer>
      
      <div class="more-examples">
        <h2>更多数学公式示例</h2>
        <MathJaxRenderer>
          <h3>上下标示例</h3>
          <p>上标示例: \(a^2\), \(x^n\), \(e^{i\pi}\)</p>
          <p>下标示例: \(a_1\), \(x_n\), \(a_{ij}\)</p>
          <p>混合上下标: \(a_i^j\), \(x_{i+1}^{n-1}\)</p>
          
          <h3>极限示例</h3>
          <p>极限表达式: $$\lim_{n \to \infty}\left(1 + \frac{1}{n}\right)^n = e$$</p>
          <p>复杂极限: $$\lim_{x \to 0}\frac{\tan x - x}{x^3} = \frac{1}{3}$$</p>
          
          <h3>积分示例</h3>
          <p>定积分: $$\int_{a}^{b} f(x) \, dx = F(b) - F(a)$$</p>
          <p>不定积分: $$\int x^n dx = \frac{x^{n+1}}{n+1} + C, n \neq -1$$</p>
        </MathJaxRenderer>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import MathJaxRenderer from './MathJaxRenderer.vue'

export default defineComponent({
  name: 'MathsIndex',
  components: {
    MathJaxRenderer
  }
})
</script>

<style scoped>
.mathjax-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Times New Roman', serif;
}

.formula-example {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.math-content {
  line-height: 1.6;
  margin-bottom: 20px;
}

.formula-display {
  margin-top: 30px;
  padding: 15px;
  background-color: #f0f8ff;
  border-radius: 6px;
  text-align: center;
}

.formula {
  font-size: 1.2em;
  padding: 10px;
}

h1, h2, h3 {
  color: #333;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
}
</style>

<!-- <script lang="ts">
declare global {
  interface Window {
    MathJax: any;
  }
}
</script> -->
